<template>
  <div class="dashboard-container">
    <!-- 页面标题 -->
    <div class="page-header">
      <h2>二级维护站管理平台</h2>
      <p>欢迎使用二级维护站综合管理系统，实时监控全站运行状态</p>
    </div>

    <!-- 统计卡片区域 -->
    <el-row :gutter="20" class="stats-row">
      <el-col :span="6">
        <el-card shadow="hover" class="stat-card">
          <div slot="header" class="card-header">
            <span class="card-title">预警数量</span>
            <el-button type="text" size="mini" class="more-btn">查看详情</el-button>
          </div>
          <el-row :gutter="10" class="warning-stats">
            <el-col :span="12" class="warning-item success">
              <div class="warning-value">10</div>
              <div class="warning-label">维护时间</div>
            </el-col>
            <el-col :span="12" class="warning-item primary">
              <div class="warning-value">10</div>
              <div class="warning-label">车辆超期</div>
            </el-col>
            <el-col :span="12" class="warning-item danger">
              <div class="warning-value">10</div>
              <div class="warning-label">超范围维修</div>
            </el-col>
            <el-col :span="12" class="warning-item info">
              <div class="warning-value">10</div>
              <div class="warning-label">证书超期或不全</div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" class="stat-card animated">
          <div slot="header" class="card-header">
            <span class="card-title">工单数量</span>
            <el-button type="text" size="mini" class="more-btn">查看详情</el-button>
          </div>
          <div class="single-stat">
            <el-progress :percentage="65" :color="progressBarColor" :show-text="false" class="progress-circle"></el-progress>
            <div class="stat-number primary">10</div>
            <div class="stat-desc">本月工单总数</div>
            <div class="stat-change positive">+5% <span class="small-text">较上月</span></div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" class="stat-card animated">
          <div slot="header" class="card-header">
            <span class="card-title">二级维护站数量</span>
            <el-button type="text" size="mini" class="more-btn">查看详情</el-button>
          </div>
          <div class="single-stat">
            <el-progress :percentage="85" :color="progressBarColorGreen" :show-text="false" class="progress-circle"></el-progress>
            <div class="stat-number success">10</div>
            <div class="stat-desc">维护站总数</div>
            <div class="stat-change positive">+2% <span class="small-text">较上月</span></div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" class="stat-card animated">
          <div slot="header" class="card-header">
            <span class="card-title">车辆库</span>
            <el-button type="text" size="mini" class="more-btn">查看详情</el-button>
          </div>
          <div class="single-stat">
            <el-progress :percentage="72" :color="progressBarColorInfo" :show-text="false" class="progress-circle"></el-progress>
            <div class="stat-number info">10</div>
            <div class="stat-desc">车辆总数</div>
            <div class="stat-change positive">+8% <span class="small-text">较上月</span></div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 图表区域 -->
    <el-row :gutter="20" class="charts-row">
      <!-- 工单趋势图 -->
      <el-col :span="16">
        <el-card shadow="hover" class="chart-card">
          <div slot="header" class="card-header">
            <span class="card-title">每月工单量趋势</span>
            <div class="chart-filter">
              <el-row :gutter="5">
                <el-col :span="8">
                  <el-form>
                    <el-form-item>
                      <el-select placeholder="所属地区">
                        <el-option>临沂市</el-option>
                      </el-select>
                    </el-form-item>
                  </el-form>
                </el-col>
                <el-col :span="8">
                  <el-form>
                    <el-form-item>
                      <el-select placeholder="选择二级维护站">
                        <el-option>临沂第一维护站</el-option>
                      </el-select>
                    </el-form-item>
                  </el-form>
                </el-col>
                <el-col :span="8">
                  <el-radio-group v-model="chartPeriod" size="small">
                    <el-radio-button label="week">周</el-radio-button>
                    <el-radio-button label="month">月</el-radio-button>
                    <el-radio-button label="quarter">季度</el-radio-button>
                  </el-radio-group>
                </el-col>
              </el-row>
            </div>
          </div>
          <div class="chart-container">
            <base-e-charts :options="lhddsMonthUsedData"></base-e-charts>
          </div>
        </el-card>
      </el-col>
      <!-- 政策法规列表 -->
      <el-col :span="8">
        <el-card shadow="hover" class="chart-card">
          <div slot="header" class="card-header">
            <span class="card-title">政策法规</span>
            <el-button type="text" size="mini" class="more-btn">查看全部</el-button>
          </div>
          <div class="regulations-list">
            <div
              v-for="regulation in regulations"
              :key="regulation.id"
              class="regulation-item"
              @click="viewRegulation(regulation.id)"
            >
              <div class="regulation-title">{{ regulation.title }}</div>
              <div class="regulation-date">{{ regulation.date }}</div>
              <div class="regulation-content">{{ regulation.content }}</div>
              <el-divider></el-divider>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 第二行图表 -->
    <el-row :gutter="20" class="charts-row">
      <!-- 预警数量柱状图 -->
      <el-col :span="12">
        <el-card shadow="hover" class="chart-card">
          <div slot="header" class="card-header">
            <span class="card-title">各类预警数量对比</span>
          </div>
          <div class="chart-container">
            <base-e-charts :options="warningChartData"></base-e-charts>
          </div>
        </el-card>
      </el-col>
      <!-- 最近工单列表 -->
      <el-col :span="12">
        <el-card shadow="hover" class="chart-card">
          <div slot="header" class="card-header">
            <span class="card-title">最近工单</span>
            <el-button type="text" size="mini" class="more-btn">查看全部</el-button>
          </div>
          <div class="recent-orders">
            <el-table :data="recentOrders" stripe style="width: 100%">
              <el-table-column prop="orderNo" label="工单编号" width="180"></el-table-column>
              <el-table-column prop="stationName" label="维护站"></el-table-column>
              <el-table-column prop="status" label="状态">
                <template slot-scope="scope">
                  <el-tag :type="getOrderStatusType(scope.row.status)">{{ scope.row.status }}</el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="createTime" label="创建时间"></el-table-column>
            </el-table>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 快速入口 -->
    <el-row :gutter="20" class="quick-entry">
      <el-col :span="24">
        <el-card shadow="hover" class="entry-card">
          <div slot="header" class="card-header">
            <span class="card-title">快速操作</span>
          </div>
          <div class="entry-buttons">
            <el-button type="primary" icon="el-icon-edit" class="entry-btn">新增工单</el-button>
            <el-button type="success" icon="el-icon-search" class="entry-btn">查询车辆</el-button>
            <el-button type="info" icon="el-icon-user" class="entry-btn">维护站管理</el-button>
            <el-button type="warning" icon="el-icon-bell" class="entry-btn">预警处理</el-button>
            <el-button type="danger" icon="el-icon-document" class="entry-btn">报表导出</el-button>
            <el-button icon="el-icon-setting" class="entry-btn">系统设置</el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import BaseECharts from "./components/BaseECharts.vue";
import {lhddsMonthUsedBarChart, warningChart} from './components/data.js'

export default {
  name: "Index",
  components: { BaseECharts },
  data() {
    return {
      // 版本号
      version: "3.9.0",
      // 图表周期选择
      chartPeriod: 'month',
      // 最近工单数据
      recentOrders: [
        { orderNo: 'WD202311001', stationName: '临沂第一维护站', status: '已完成', createTime: '2023-11-15 10:30' },
        { orderNo: 'WD202311002', stationName: '临沂第二维护站', status: '处理中', createTime: '2023-11-14 15:45' },
        { orderNo: 'WD202311003', stationName: '临沂第三维护站', status: '已预约', createTime: '2023-11-14 09:20' },
        { orderNo: 'WD202311004', stationName: '临沂第一维护站', status: '已完成', createTime: '2023-11-13 16:30' },
        { orderNo: 'WD202311005', stationName: '临沂第四维护站', status: '处理中', createTime: '2023-11-13 11:15' }
      ],
      // 政策法规数据
      regulations: [
        {
          id: 1,
          title: '关于加强道路运输车辆技术管理的通知',
          date: '2023-10-15',
          content: '为进一步规范道路运输车辆技术管理，保障道路运输安全，现就有关事项通知如下...'
        },
        {
          id: 2,
          title: '道路运输车辆维护管理规定',
          date: '2023-09-20',
          content: '为规范道路运输车辆维护行为，提高车辆技术状况，预防和减少道路交通事故...'
        },
        {
          id: 3,
          title: '二级维护站达标考核标准(2023版)',
          date: '2023-08-10',
          content: '为加强二级维护站管理，确保维护质量，制定本考核标准...'
        },
        {
          id: 4,
          title: '关于开展道路运输车辆二级维护专项整治行动的通知',
          date: '2023-07-05',
          content: '为进一步加强道路运输车辆二级维护管理，规范维护行为，保障运输安全...'
        }
      ],
      // 进度条颜色
      progressBarColor: {
        '0%': '#409EFF',
        '100%': '#67C23A'
      },
      progressBarColorGreen: {
        '0%': '#67C23A',
        '100%': '#409EFF'
      },
      progressBarColorInfo: {
        '0%': '#909399',
        '100%': '#409EFF'
      }
    }
  },
  computed:{
    lhddsMonthUsedData(){
      // 根据选择的周期调整图表数据
      let option = lhddsMonthUsedBarChart.option();
      if (this.chartPeriod === 'week') {
        option.xAxis[0].data = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
        option.series[0].data = [500, 800, 1200, 900, 1500, 800, 600];
      } else if (this.chartPeriod === 'quarter') {
        option.xAxis[0].data = ['Q1', 'Q2', 'Q3', 'Q4'];
        option.series[0].data = [15000, 21000, 18000, 24000];
      }
      return option;
    },
    warningChartData(){
      return warningChart.option();
    }
  },
  methods: {
    goTarget(href) {
      window.open(href, "_blank")
    },
    // 获取订单状态对应的标签类型
    getOrderStatusType(status) {
      switch (status) {
        case '已完成': return 'success';
        case '处理中': return 'primary';
        case '已预约': return 'warning';
        case '已取消': return 'danger';
        default: return 'info';
      }
    },
    // 查看政策法规详情
    viewRegulation(id) {
      // 这里可以添加查看详情的逻辑，比如打开详情弹窗或跳转到详情页面
      console.log('查看政策法规详情:', id);
      this.$message.info('查看政策法规详情功能待实现');
    }
  }
}
</script>

<style scoped lang="scss">
.dashboard-container {
  padding: 20px;
  background-color: #f0f2f5;

  .page-header {
    margin-bottom: 24px;
    h2 {
      margin: 0 0 8px 0;
      font-size: 24px;
      color: #303133;
    }
    p {
      margin: 0;
      color: #606266;
      font-size: 14px;
    }
  }

  .stats-row {
    margin-bottom: 20px;
  }

  .charts-row {
    margin-bottom: 20px;
  }

  .stat-card {
    height: 100%;
    transition: all 0.3s ease;

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
    }
  }

  .animated {
    animation: fadeInUp 0.6s ease-out;
  }

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .card-title {
      font-weight: bold;
      color: #303133;
    }

    .more-btn {
      font-size: 12px;
      color: #606266;
      padding: 0;
    }
  }

  .warning-stats {
    margin-top: 10px;

    .warning-item {
      padding: 10px 0;
      text-align: center;

      .warning-value {
        font-size: 20px;
        font-weight: bold;
        margin-bottom: 4px;
      }

      .warning-label {
        font-size: 12px;
        color: #606266;
      }

      &.success .warning-value {
        color: #67C23A;
      }

      &.primary .warning-value {
        color: #409EFF;
      }

      &.danger .warning-value {
        color: #F56C6C;
      }

      &.info .warning-value {
        color: #909399;
      }
    }
  }

  .single-stat {
    position: relative;
    padding: 20px 0;
    text-align: center;

    .progress-circle {
      width: 80px;
      height: 80px;
      margin: 0 auto 10px;
    }

    .stat-number {
      font-size: 32px;
      font-weight: bold;
      margin-bottom: 5px;
    }

    .primary {
      color: #409EFF;
    }

    .success {
      color: #67C23A;
    }

    .info {
      color: #909399;
    }

    .stat-desc {
      font-size: 14px;
      color: #606266;
      margin-bottom: 5px;
    }

    .stat-change {
      font-size: 12px;
    }

    .positive {
      color: #67C23A;
    }

    .negative {
      color: #F56C6C;
    }

    .small-text {
      font-size: 10px;
    }
  }

  .chart-card {
    height: 100%;
  }

  .chart-container {
    height: 300px;
  }

  .chart-filter {
    display: flex;
    align-items: center;
  }

  .recent-orders {
    padding: 10px 0;

    .el-table {
      font-size: 14px;
    }
  }

  .quick-entry {
    .entry-buttons {
      display: flex;
      justify-content: space-around;
      padding: 15px 0;

      .entry-btn {
        width: 120px;
        transition: all 0.3s ease;

        &:hover {
          transform: translateY(-2px);
        }
      }
    }
  }

  .regulations-list {
    padding: 5px 0;
    height: 290px;
    overflow-y: auto;

    .regulation-item {
      padding: 10px 0;
      cursor: pointer;
      transition: all 0.2s ease;

      &:hover {
        background-color: #f5f7fa;
        padding-left: 10px;
      }

      .regulation-title {
        font-weight: bold;
        font-size: 14px;
        color: #303133;
        margin-bottom: 5px;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }

      .regulation-date {
        font-size: 12px;
        color: #909399;
        margin-bottom: 8px;
      }

      .regulation-content {
        font-size: 13px;
        color: #606266;
        line-height: 1.5;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
    }
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes jump {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}
</style>

